import React, { Component } from "react";
import ScrollReveal from "scrollreveal";
import anime from "animejs/lib/anime.es.js";

import Header from "../../components/index/Header";
import Slide from "../../components/slide/Slide";
import Footer from "../../components/index/Footer";
import TeamIntro from "../../components/index/TeamIntro";

import "../../assets/css/index/index.css";
import Service from "../../components/index/Service";
import ShowPets from "../../components/index/ShowPets";
import DataShow from "../../components/index/DataShow";

class Home extends Component {
  componentDidMount() {
    const staggeringOption = {
      delay: 300,
      distance: "50px",
      duration: 500,
      easing: "ease-in-out",
      origin: "bottom",
    };

    ScrollReveal().reveal(".feature", { ...staggeringOption, interval: 350 });
    ScrollReveal().reveal(".service-item", {
      ...staggeringOption,
      interval: 350,
    });

    const dataSectionEl = document.querySelector(".data-section");

    ScrollReveal().reveal(".data-section", {
      beforeReveal: () => {
        anime({
          targets: ".data-piece .num",
          innerHTML: (el) => {
            return [0, el.innerHTML];
          },
          duration: 2000,
          round: 1,
          easing: "easeInExpo",
        });
        dataSectionEl.style.backgroundPosition = `center calc(50% - ${
          dataSectionEl.getBoundingClientRect().bottom / 5
        }px)`;
      },
    });
  }
  render() {
    return (
      <div style={{ overflow: "hidden" }}>
        <Header></Header>
        <Slide></Slide>
        <div className="content-wrapper">
          <Service></Service>
          <ShowPets></ShowPets>
          <DataShow></DataShow>
          <TeamIntro></TeamIntro>
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default Home;
